<template>
    <dv-border-box-10>
        <div class="box">
            <div class="box-show">
                <div class="show-header">
                    <span class="spans-icon">
                        <v-icon name="chart-pie" class="text-icon"></v-icon>
                    </span>
                    <span>地图数据</span>
                    <span>
                        <dv-decoration-1 style="width:100px;height:20px;" />
                    </span>
                </div>
                <div class="show-content">
                    <!-- <echarts id="main" width="320px" height="350px" :option="option"></echarts> -->
                    <echart :cdata="option"></echart>
                </div>
            </div>
        </div>
    </dv-border-box-10>
</template>

<script>
import echarts from '@/components/echarts/index';
import echart from '@/components/oneLeftSecond/chart'
export default {
    data() {
        return {
            option: [
                {
                    // 名字需要与 “common/map/fujian.js” 地图数据文件里面定义的一一对应，不能是 “福州” 或者 “闽” 之类的缩写
                    name: '福州市',
                    value: 10,
                    elseData: {
                        // 这里放置地图 tooltip 里想显示的数据
                    }
                },
                {
                    name: '厦门市',
                    value: 9,
                },
                {
                    name: '漳州市',
                    value: 8,
                },
                {
                    name: '泉州市',
                    value: 7,
                },
                {
                    name: '三明市',
                    value: 6,
                },
                {
                    name: '莆田市',
                    value: 5,
                },
                {
                    name: '南平市',
                    value: 4,
                },
                {
                    name: '龙岩市',
                    value: 3,
                },
                {
                    name: '宁德市',
                    value: 2,
                }
            ]
        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    components: {
        echarts,
        echart
    },
};
</script>

<style lang="scss" scoped>
.dv-border-box-10 {
    width: 362px;
    margin: 0 5px;

}

.box {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 16px;

    .box-show {
        width: 100%;
        height: 100%;
        background: rgba(19, 25, 47, 0.6);
        display: flex;
        flex-wrap: wrap;

        .show-header {
            width: 100%;
            height: 20px;
            line-height: 20px;
            color: white;
            display: flex;
            align-items: center;

            // padding: 8px 0 0 0;
            .spans-icon {
                margin-top: 10px;
            }

            span {
                margin: 8px 0 0 8px;
                line-height: 20px;
                display: inline-block;
                color: #c3cbde;
                font-size: 12px;
            }
        }

        .show-content {
            width: 100%;
            height: 360px;

        }
    }
}
</style>
